<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form action="">
    用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="10" value="tom" readonly><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：
    <input type="radio" name="sex" value="男" >男
    <input type="radio" name="sex" value="女" checked>女<br>
    爱好：
    <input type="checkbox" name="hobby" value="打篮球">打篮球
    <input type="checkbox" name="hobby" value="打游戏">打游戏
    <input type="checkbox" name="hobby" value="看电影">看电影
    <br>
    靓照:
    <input type="file" name="photo"><br>
    生日：<input type="date" name="birthday">
    颜色:<input type="color" name="color"><br>
    范围:<input type="range" name="range" min="0" max="100" step="10">
    城市:
    <select name="city">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
    </select><br>
    <input type="checkbox" id="ok">
    <label for="ok">我已阅读并同意《用户协议》</label><br>
    <!-- 关联效果:点击文字即可选中输入框,且输入框有输入光标 I -->
    <label for="nickname">昵称:</label>
    <input type="text" id="nickname">
    <br>
    <br>
<!--    留言板-->
    <textarea name="message" id="" cols="30" rows="10" style="resize:none"></textarea>
    <br>
<!--  关于按钮-->
    <input type="submit" value="登录">
    <input type="reset" value="重置">
<!--普通按钮没啥功能，触发js的代码-->
    <input type="button" value="普通按钮" disabled>
    <button>普通按钮</button>
    <button onclick="alert('泥嚎我是外星人')" >普通按钮</button>
</form>
</body>
</html>